<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="40px"><Header></Header></el-header>
          <el-main>
            <!--工具栏-->
            <div class="tool-nav">
              <el-input placeholder="搜索" v-model="searchStr" class="search" >
                <template #prepend>
                  <el-select v-model="select" placeholder="Select" style="width: 80px">
                    <el-option label="日期" value="1"/>
                    <el-option label="编号" value="2" />
                    <el-option label="姓名" value="3" />
                    <el-option label="账号" value="4" />
                    <el-option label="职位" value="5" />
                    <el-option label="权限" value="6" @click="attention"/>
                  </el-select>
                </template>
              </el-input>
              <el-button @click="fuzzySearch">
                <el-icon class="icon-button"><Search /></el-icon>
                <p>搜索</p>
              </el-button>
              <el-button @click="all">
                <el-icon class="icon-button"><refresh-right /></el-icon>
                <p>全部</p>
              </el-button>
              <el-button
                type="primary"
                @click="addAdministrators">
                <el-icon class="icon-button"><plus /></el-icon>
                <p>添加管理员</p>
              </el-button>
            </div>
            <!--工具栏-->
            <!--数据-->
            <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
            v-loading="loading"
            >
              <el-table-column type="expand">
                <template #default="props">
                  <el-row>
                    <el-col :span="12" class="detail-info">
                      <p >编号id: {{ props.row.id }}</p>
                      <p >日期: {{ props.row.date }}</p>
                      <p >名字: {{ props.row.name }}</p>
                      <p >账号: {{ props.row.account }}</p>
                      <p >密码: {{ props.row.password }}</p>
                      <p >权限: {{ props.row.authority }}</p>
                      <p >职位: {{ props.row.position }}</p>
                    </el-col>
                    <el-col :span="12">
                      <el-image
                        style="width: 200px; height: 230px"
                        :src="props.row.picture"
                        :fit="fit">
                            <template #error>
                            <div class="image-slot">
                                <el-icon><avatar /></el-icon>
                            </div>
                            </template>
                        </el-image>
                    </el-col>
                  </el-row>
                    <!-- <p >照片: {{ props.row.picture }}</p> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="日期"
                sortable>
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                sortable>
              </el-table-column>
              <el-table-column
                prop="position"
                sortable
                label="职位">
              </el-table-column>
              <el-table-column
                prop="authority"
                label="权限"
                sortable>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    type="primary"
                    @click="handleEdit(scope.row)">
                    <el-icon><edit /></el-icon>
                  </el-button>
                  <el-button
                    type="danger"
                    @click="handleDelete(scope.$index,scope.row)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--数据-->
            <AdministratorsAdd ref="add" @updateData="updateData"></AdministratorsAdd>
            <AdministratorsModify ref="modify" @updateData="updateData"></AdministratorsModify>
          </el-main>
          <el-footer>
            <!--分页-->
              <el-pagination
                  :page-sizes="[5, 10]"
                  :background="background"
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="pageNO"
                  @current-change="handleCurrentChange"
              />
            <!--分页-->
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import AdministratorsAdd from '@/components/AdministratorsAdd.vue'
import AdministratorsModify from '@/components/AdministratorsModify.vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'ModifyPasswordView',
  components: {
    NavMenu,
    Header,
    AdministratorsAdd,
    AdministratorsModify
  },
  data() {
    return {
      tableData: [],
      searchStr:'',
      select:'1',
      total:0,
      pageSize:6,
      pageNO:1,
      loading:true
    }
  },
  methods: {
    //添加管理员对话框
    addAdministrators(){
      var that=this;
      that.$refs.add.dialogShow();
    },
    //加载全部管理员信息
    loadAdminInfo(){
      var that=this;
      let params = {
        pageNO:this.pageNO,
        pageSize:this.pageSize
      };
      this.axios
      .post("/admininfo/allAdminInfo", params)
      .then(function (response) {
        that.tableData=response.list;
        that.total=response.total;
        that.loading=false;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //换页 (全部/查询)
    handleCurrentChange(pageNO){
      this.loading=true;
      if(this.searchStr==""){
        this.pageNO=pageNO;
        this.loadAdminInfo();
      }
      else{
        this.pageNO=pageNO;
        this.fuzzySearch();
      }
    },
    //编辑管理员信息对话框
    handleEdit(row) {
      var that=this;
      that.$refs.modify.dialogShow(row.id);
    },
    //修改/增加管理员信息后更新表格数据
    updateData(){
      this.loading=true;
      this.loadAdminInfo();
    },
    //删除管理员信息
    handleDelete(index,row) {
      var that=this;
      this.loading=true;
      this.axios
        .get("/admininfo/deleteAdminInfoById?id="+row.id)
        .then(function (response) {
          that.loadAdminInfo();
        })
        .catch(function (error) {
            console.log(error);
        });
    },
    //模糊查询
    fuzzySearch(){
      this.loading=true;
      var that=this;
      let params = {
        pageNO:this.pageNO,
        pageSize:this.pageSize,
        searchStr:this.searchStr,
        select:this.select
      };
      this.axios
      .post("/admininfo/queryAdminInfo", params)
      .then(function (response) {
        that.tableData=response.list;
        that.total=response.total;
        that.loading=false;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //显示全部信息，并清空搜索框
    all(){
      this.loading=true;
      this.loadAdminInfo();
      this.searchStr="";
    },
    //下拉列表提示
    attention(){
      ElMessage({
          showClose: true,
          message: '权限字段不支持模糊查询',
        })
    }
  },
  mounted(){
    var a=sessionStorage.getItem('loginUser');
    var account=a.substring(a.indexOf(':"')+2,a.indexOf('",'));
    var that=this;
    this.axios
      .get("/admininfo/affirmAuthority?account="+account)
      .then(function (response) {
        if(response=="a"){
          that.loadAdminInfo();
        }
        else{
          that.$alert('没有权限！', '访问错误', {
          confirmButtonText: '确定',
          callback: action => {
            that.$router.replace({path: '/client'});
          }
        });
        
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

</script>

<style scoped>
.el-header /deep/ { 
  padding: 0;
}
.el-main /deep/{
  height: 300px;
}
.tool-nav{
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}
.search{
  width: 250px;
  float: left;
  margin-right: 12px;
}
.icon-button{
  margin-right: 5px;
}
.image-slot{
  font-size: 40px;
    line-height: 200px;
}
.detail-info{
  padding-left: 60px;
}
.el-pagination{
  justify-content: center;
}
</style>
